import { TableList } from '../../components/TableList';
import { Badge, Button, message, Modal, Table } from 'antd';
import { useState } from 'react';
import { request } from '../../../utils/request.ts';
import { v4 as uuidv4 } from 'uuid';

enum statusType {
  _0 = '已下架',
  _1 = '已上架',
  _2 = '待上架',
}

enum statusBadge {
  _0 = 'error',
  _1 = 'success',
  _2 = 'processing'
}

const ProductList = () => {
  const [modalDetailVisible, setModalDetailVisible] = useState(false);
  const [modalImagesVisible, setModalImagesVisible] = useState(false);
  const [expandRowKeys, setExpandRowKeys] = useState([]);
  const [expandRowData, setExpandRowData] = useState([]);
  const onClickDetail = (record) => {
    if (!record.productChoice) {
      message.warning('暂无产品参数详情');
      return;
    }
    setModalDetailVisible(true);
    let detail = JSON.parse(record.productChoice);
  };


  const columns = [
    {
      key: 'productId',
      dataIndex: 'productId',
      title: '产品ID'
    }, {
      key: 'productCode',
      title: '产品编码',
      dataIndex: 'productCode'
    }, {
      key: 'name',
      title: '产品名称',
      dataIndex: 'name'
    }, {
      key: 'basePrice',
      dataIndex: 'basePrice',
      title: '最低价格'
    }, {
      key: 'totalStock',
      dataIndex: 'totalStock',
      title: '总库存'
    }, {
      key: 'status',
      dataIndex: 'status',
      title: '状态',
      render: (text: string, record) => {
        return (
          <div style={{ display: 'flex' }}>
            <Badge status={statusBadge['_' + record.status]} />
            <span style={{ marginLeft: '5px' }}>{statusType['_' + record.status]}</span>
          </div>
        );
      }
    }, {
      key: 'imageList',
      dataIndex: 'imageList',
      title: '产品图片',
      render: (text: string, record) => {
        return (
          <Button type={'link'}>查看图片</Button>
        );
      }
    }, {
      key: 'productChoice',
      dataIndex: 'productChoice',
      title: '产品参数详情',
      render: (text: string, record) => {
        return <Button onClick={() => onClickDetail(record)} type={'link'}>查看详情</Button>;
      }
    }, {
      key: 'createdTime',
      dataIndex: 'createdTime',
      title: '创建时间'
    }, {
      key: 'action',
      dataIndex: 'action',
      title: '操作'
    }
  ];

  const onExpand = async (expanded, record) => {
    setExpandRowKeys(expanded ? ['productId'] : []);
    if (expanded) {
      const data = await request('/admin/product/sku/by_id', {
        data: {
          productId: record.productId
        }
      });
      if (data) {
        setExpandRowData(data.list);
      }
    }
  };

  const expandRowRender = (record) => {
    const columns = [
      {
        key: 'skuId',
        dataIndex: 'skuId',
        title: '规格号'
      },
      {
        key: 'price',
        dataIndex: 'price',
        title: '价格'
      }, {
        key: 'stock',
        dataIndex: 'stock',
        title: '库存'
      }
    ];
    const specsColumn = [];
    if (expandRowData.length > 0) {
      expandRowData[0].specs.forEach(spec => {
        let obj = {};
        obj['key'] = uuidv4();
        obj['dataIndex'] = spec.name;
        obj['title'] = spec.name;
        specsColumn.push(obj);
      });
      columns.push(...specsColumn);
      expandRowData.map(item => {
        item.specs.forEach(spec => {
          item[spec.name] = spec.value;
        });
        return item;
      });

      return (
        <Table
          columns={columns}
          dataSource={expandRowData}
        />
      );
    }
    return <Table
      columns={columns}
      dataSource={[]}
    />;
  };

  return (
    <div>
      <Modal
        open={modalDetailVisible}
        title={'产品参数详情'}
        onCancel={() => setModalDetailVisible(false)}
      >

      </Modal>
      <TableList
        onExpand={onExpand}
        expandedRowRender={expandRowRender}
        requestOptions={{
          url: '/admin/product/list',
          options: {
            method: 'GET'
          }
        }} columns={columns} />
    </div>
  );
};

export default ProductList;